<template>
  <div style="width:100%;height:100vh;background:#414141;">
    <mt-header fixed title="修改密码" style="background:#1d1d1d;color:#fff;">
      <div slot="left">
        <router-link to="/index" slot="left" style="text-decoration: none;color: #fff;"><mt-button icon="back"></mt-button></router-link>
      </div>
    </mt-header>
    <div style="width: 100%;height:.95rem;"></div>
    <div class="ver_content" style="margin-top:.5rem;">
      <div class="option">当前账户</div>
      <!-- <span>{{ names }}</span> -->
    </div>
    <div class="ver_content" style="margin-top:.2rem;">
      <div class="option">新密码</div>
      <input type="password" placeholder="请输入新密码" v-model="parampass.password" />
    </div>
    <div class="ver_content" style>
      <div class="option">确认密码</div>
      <input type="password" placeholder="请再次确认新密码" v-model="parampass.password_repetition" />
    </div>
    <div class="ver_button"><button @click="change()">修改密码</button></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      names: '',
      parampass: {
        password: '', //密码
        password_repetition: '', //重复密码
        group: 'app'
      }
    };
  },
  computed: {},
  mounted() {
    this.name();
  },
  methods: {
    //修改密码
    change() {
      if (this.parampass.password != this.parampass.password_repetition) {
        this.$message.error('两次密码不一致！请重新输入！');
      } else {
        this.$post('v1/site/up-pwd', this.parampass).then(res => {
          if (res.code == 200) {
            this.$message.success('修改成功！');
            (this.parampass.username = ''), (this.parampass.password = ''), (this.parampass.password_repetition = '');
          } else {
            this.$message.error(res.message || '修改失败！请重试！');
          }
        });
      }
    },
    name() {
      this.$get('addons/tf-futures/member/my-info').then(res => {
        if (res.code == 200) {
          this.names = res.data.username;
        }
      });
    }
  }
};
</script>

<style scoped>
.ver_content {
  width: 90%;
  height: 1rem;
  background: #414141;
  display: flex;
  align-items: center;
  padding: 0 0.3rem;
  box-sizing: border-box;
  margin: 0.5rem auto;
  border: 2px solid #333;
  color: #ccc;
  border-radius: 5px;
}

.ver_content > span {
  font-size: 0.35rem;
  margin-left: 0.2rem;
}

.ver_content input {
  width: 70%;
  height: 70%;
  padding: 0 0.2rem;
  border: none;
  outline: none;
  background: #414141;
  color: #ccc;
}

.ver_button {
  width: 100%;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ver_button button {
  width: 90%;
  height: 1rem;
  background: #333;
  color: #fff;
  font-size: 0.4rem;
  letter-spacing: 2px;
  border: none;
  border-radius: 0.106667rem;
  outline: none;
}

.ver_button button:active {
  background: #e96302;
}

.ver_text {
  width: 100%;
  height: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 2px;
}

.option {
  width: 150px;
}

.ver_text span:last-child {
  color: #3697ff;
}
</style>
